<template>
	<view class="wap">
		<navbar :parameter='parameter'></navbar>
		<view class="form-box" :style="{'top':navHeight+'rpx'}">
			<view class="box form">
				<navigator class="line acea-row picker" url="/pages/user/patient_management?isChoice=0">
					<view class="tit"> 选择就诊人 </view>
					<input type="text" v-model="patient.member_name" placeholder="请选择就诊人" placeholder-class="psc"
						disabled>
				</navigator>
				<view class="line acea-row picker" @click="hospital_picker_show = true">
					<view class="tit"> 家庭住址 </view>
					<picker @change="bindPickerChange" :value="index" mode=region>
						<view class="uni-input" :class="list.city == ''?'psc':''">
							{{list.city == ''?'请选择家庭住址':list.city}}
						</view>
					</picker>
				</view>
				<view class="line acea-row">
					<view class="tit"> 具体地址 </view>
					<input type="text" v-model="list.address" placeholder="请填写具体地址" placeholder-class="psc">
				</view>
				
				<view class="line acea-row">
					<view class="tit"> 病情描述 </view>
					<textarea v-model="list.remark" placeholder="请填写病情描述" placeholder-class="psc"></textarea>
				</view>
				
				<view class="line">
					<view class="tit">上传图片</view>
					<view class="upload-item">
						<view class="upload-box">
							<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
								:maxCount="8" width="154rpx" height="154rpx">
								<image src="../../../static/images/upload.png" mode="widthFix" style="width: 154rpx;"></image>
							</u-upload>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view @click="submit()" class="order-btn">立即提交</view>
		
		<!-- 提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	let app = getApp();
	const d = new Date()
	const year = d.getFullYear();
	export default {
		data() {
			return {
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '临床试验申请',
					'color': false,
				},
				navHeight: app.globalData.navHeight,
				patient: '',
				list: {
					openid: '',
					syfwzy_id: '',
					sylz_id: '',
					member_id: '',
					city: '',
					address: '',
					remark: '',
					images: ''
				},
				fileList1: [],
			};
		},
		onLoad(option) {
			this.list.syfwzy_id = option.id;
			this.list.sylz_id = uni.getStorageSync('service_id');
		},
		onShow() {
			uni.$once('patient', (patient) => {
				this.patient = patient.patient;
				console.log("就诊人", this.patient);
				this.list.member_id = patient.patient.id;
			});
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {

		},
		onShareTimeline(res) { //分享到朋友圈

		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					console.log(JSON.parse(result).data)
					const img = JSON.parse(result).data
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: img
					}))
					fileListLen++
				}
			
				console.log(event.name, this[`fileList${event.name}`])
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://dsby.hearoommed.com/api/uploads/uploadImage', // 仅为示例，非真实的接口地址
						// url: 'http://192.168.0.3:11122/api/uploads/uploadImage', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'image',
						formData: {
							openid: uni.getStorageSync('openid')
						},
						success: (res) => {
							console.log('11111')
							setTimeout(() => {
								resolve(res.data)
							}, 1000)
						},
						fail(res) {
							console.log('fail', res)
						}
					});
				})
			},
			
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.list.city = e.detail.value[0] + '/' + e.detail.value[1] + '/' + e.detail.value[2]
			},
			
			submit() {
				var imgArr = [];
				this.fileList1.forEach(function(item) {
					imgArr.push(item.url)
				});
				this.list.images = imgArr.toString();
				
				if (!this.list.member_id) {
					this.$refs.uToast.show({
						type: 'error',
						message: '请选择就诊人'
					})
					return;
				}
				if (!this.list.city) {
					this.$refs.uToast.show({
						type: 'error',
						message: '请选择家庭住址'
					})
					return;
				}
				if (!this.list.address) {
					this.$refs.uToast.show({
						type: 'error',
						message: '请填写具体住址'
					})
					return;
				}
				if (!this.list.remark) {
					this.$refs.uToast.show({
						type: 'error',
						message: '请填写病情描述'
					})
					return;
				}
				this.apply()
			},
			async apply() {
				this.list.openid = uni.getStorageSync('openid')
				const res = await this.$myRequest({
					url: '/api/Lcsy/insert',
					data: this.list,
				})
				if (res.data.status == 200) {
					this.$refs.uToast.show({
						type: 'success',
						message: '提交成功',
						complete() {
							uni.reLaunch({
								url:'/pages/index/index'
							})
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wap{
		padding: 30upx;
		background: #fff;
	}

	.form .line {
		font-size: 28rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #D9D9DA;

	}

	.form .line:last-child {
		border-bottom: none;
	}

	.form .line .tit {
		color: #000;
		width: 140rpx;
		text-align-last: justify;
	}

	.form .line input,
	.form .line picker {
		color: #000;
		flex: 1;
		height: 100rpx;
		line-height: 100rpx;
		text-align: right;
	}

	.form .line.picker {
		padding-right: 30rpx;
		position: relative;
	}

	.form .line.picker::after {
		content: "\e61f";
		font-family: "iconfont";
		display: block;
		position: absolute;
		font-size: 24rpx;
		color: #b4b4b4;
		top: 0;
		right: 0rpx;
		line-height: 100rpx;
	}

	.form .line textarea {
		width: 100%;
		height: 130rpx;
		border-radius: 12rpx;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		line-height: 1.4;
	}

	.order-btn {
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		width: 100%;
		height: 90rpx;
		background: #347DFE;
		color: #fff;
		text-align: center;
		line-height: 90rpx;
	}

</style>
